<template>
    <section style="padding-bottom:90px;">
        <DetailsHeader title="机器信息" class="mb-24" />

        <div class="card">
            <a-form :label-col="{
                style: {
                    width: '150px',
                }
            }" :model="form" ref="formRef">
                <a-form-item label="机器ID">
                    {{ form.machineId }}
                </a-form-item>
                <a-form-item label="出租时段">
                    <a-range-picker v-model:value="form.date" class="mr-24" />
                    <div class="tips"><info-circle-filled
                            style="margin-right: 5px;" />出租时段不得少于40天；结束时间前10天是用户数据迁移期，机器将从市场自动下架，请根据实际情况设置出租时段，到期前不能关机/下架等操作，否则将影响提现。
                    </div>
                </a-form-item>
                <a-form-item label="定价（单GPU）">
                    <a-input placeholder="" v-model:value="form.originPrice" style="width: 150px;" class="mr-8"></a-input>
                    <span class="mr-8">元/小时</span>
                    <span class="tips" style="color: #FAAD14;"><info-circle-filled
                            style="margin-right: 5px;" />建议价格2-6元/小时，最高价6元/小时，不高于2元/小时将进入活动推广区（平台佣金9%）</span>
                </a-form-item>

                <a-form-item label="竞价模式">
                    <a-switch v-model:checked="form.openBiddingSwitch" class="mr-8" :checkedValue="1" :unCheckedValue="0" />
                    <span v-if="form.openBiddingSwitch">
                        <span>折扣 <a-input-number v-model:value="form.openBiddingDiscount"
                                style="width: 150px;margin: 0 5px;" :min="0" :max="100"></a-input-number>%</span>
                        <span class="ml-8">（¥{{ biddingPrice }}/小时）</span>
                    </span>
                    <div class="tips"><info-circle-filled
                            style="margin-right: 5px;" />开启后可提升机器的出租率，填写更低的价格将优先出租给选择竞价模式的用户，当资源紧张时，可能会以高于填写的价格出租给用户。</div>
                </a-form-item>

                <a-form-item label="预付费模式">
                    <template v-if="form.dailyEnable">
                        <span class="mr-8" style="width: 120px;display: inline-block;">包天（24小时）</span>
                        <a-switch v-model:checked="form.dailySwitch" class="mr-8" :checkedValue="1" :unCheckedValue="0" />
                        <span v-if="form.dailySwitch">
                            <span>折扣<a-input-number v-model:value="form.dailyDiscount" style="width: 150px;margin: 0 5px;"
                                    :min="0" :max="100"></a-input-number>%</span>
                            <span class="ml-8">（¥{{ dayPrice }}/天）</span>
                        </span>
                    </template>
                </a-form-item>

                <a-form-item label="" style="margin-left: 150px;" v-if="form.weeklyEnable">
                    <span class="mr-8" style="width: 120px;display: inline-block;">包周（7天）</span>
                    <a-switch v-model:checked="form.weeklySwitch" class="mr-8" :checkedValue="1" :unCheckedValue="0" />
                    <span v-if="form.weeklySwitch">
                        <span>折扣 <a-input-number v-model:value="form.weeklyDiscount" style="width: 150px;margin: 0 5px;"
                                :min="0" :max="100"></a-input-number>%</span>
                        <span class="ml-8">（¥{{ weekPrice }}/周）</span>
                    </span>
                </a-form-item>

                <a-form-item label="" style="margin-left: 150px;" v-if="form.monthlyEnable">
                    <span class="mr-8" style="width: 120px;display: inline-block;">包月（30天）</span>
                    <a-switch v-model:checked="form.monthlySwitch" class="mr-8" :checkedValue="1" :unCheckedValue="0" />
                    <span v-if="form.monthlySwitch">
                        <span>折扣 <a-input-number v-model:value="form.monthlyDiscount" style="width: 150px;margin: 0 5px;"
                                :min="0" :max="100"></a-input-number>%</span>
                        <span class="ml-8">（¥{{ monthPrice }}/月）</span>
                    </span>
                </a-form-item>

                <a-form-item label="是否开启代金券">
                    <a-switch v-model:checked="form.payByVoucher" :checkedValue="1" :unCheckedValue="0" />
                    <span class="tips ml-8"><info-circle-filled style="margin-right: 5px;" />开启代金券会增加出租率，但代金券不计入收入。</span>
                </a-form-item>

            </a-form>
        </div>

        <div class="page-bottom">
            <span class="tips" style="color:#FAAD14;"><info-circle-filled
                    style="margin-right: 5px;" />机器上架后，请确保不断电断网，如遇特殊情况需提前下架的，请联系平台。</span>
            <a-button type="primary" @click="submit" style="display:flex;align-item:center;"><svg-icon name="icon_release"
                    style="width:20px;height:20px;margin-right: 8px;color: #ffffff;" />确定</a-button>
        </div>
    </section>
</template>
<script setup>
import { ref, computed } from 'vue'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { getMachineDetailApi, updateMachineApi } from 'api/modules/api.ownerMachine'
import {
    InfoCircleFilled,
} from '@ant-design/icons-vue';
import { useRouter, useRoute } from 'vue-router'
import { ZyNotification } from '@/libs/util.toast'
import dayjs from 'dayjs';

const router = useRouter()
const route = useRoute();

const machineId = route.query.machineId

const biddingPrice = computed(() => {
    const price = form.value?.originPrice * (form.value?.openBiddingDiscount / 100) || 0
    return price || 0
})

const dayPrice = computed(() => {
    const price = form.value?.originPrice * 24 * (form.value?.dailyDiscount / 100) || 0
    return price || 0
})

const weekPrice = computed(() => {
    const price = form.value?.originPrice * 7 * 24 * (form.value?.weeklyDiscount / 100) || 0
    return price || 0
})

const monthPrice = computed(() => {
    const price = form.value?.originPrice * 7 * 24 * 30 * (form.value?.monthlyDiscount / 100) || 0
    return price || 0
})

//  请求详情
const form = ref({
    machineId: route.query.machineId,

})
const getDetail = () => {
    getMachineDetailApi({ machineId }).then(res => {
        if (res.code == 0) {

            const {
                machineId,
                payByVoucher,
                skuList,
                rentStartTime,
                rentEndTime
            } = res.data.list || {}

            skuList.forEach(item => {
                if (item.skuName == 'daily') {
                    form.value.dailyEnable = item.enable
                    form.value.dailySwitch = item.status
                    // form.value.dayPrice = item.originPrice
                    form.value.dailyDiscount = item.discount * 100
                } else if (item.skuName == 'weekly') {
                    form.value.weeklyEnable = item.enable
                    form.value.weeklySwitch = item.status
                    // form.value.weekPrice = item.originPrice
                    form.value.weeklyDiscount = item.discount * 100
                } else if (item.skuName == 'monthly') {
                    form.value.monthlyEnable = item.enable
                    form.value.monthlySwitch = item.status
                    // form.value.monthPrice = item.originPrice
                    form.value.monthlyDiscount = item.discount * 100
                } else if (item.skuName == 'payg') {
                    form.value.originPrice = item.originPrice
                } else if (item.skuName == 'bidding') {
                    form.value.openBiddingSwitch = item.status || 0
                    // form.value.biddingPrice = item.originPrice
                    form.value.openBiddingDiscount = item.discount * 100
                }
            });

            if(!form.value.dailyEnable) {
                form.value.dailySwitch = 0
            }

            if(!form.value.weeklyEnable) {
                form.value.weeklySwitch = 0
            }

            if(!form.value.monthlyEnable) {
                form.value.monthlySwitch = 0
            }

            if(!form.value?.openBiddingSwitch) {
                form.value.openBiddingSwitch = 0
            }
            

            form.value = {
                ...form.value,
                machineId,
                payByVoucher,
                date: [rentStartTime ? dayjs(rentStartTime) : '', rentEndTime ? dayjs(rentEndTime) : '']
            }
        }
    })
}

getDetail()

// 修改机器
const formRef = ref();
const submit = () => {
    formRef.value.validateFields().then(() => {
        const params = {
            ...form.value,
            rentStartTime: dayjs(form.value.date[0]).format('YYYY-MM-DD HH:mm:ss') || '',
            rentEndTime: dayjs(form.value.date[1]).format('YYYY-MM-DD  HH:mm:ss') || '',
            openBiddingDiscount: form.value.openBiddingDiscount ? form.value.openBiddingDiscount / 100 : null,
            monthlyDiscount: form.value.monthlyDiscount ? form.value.monthlyDiscount / 100 : null,
            weeklyDiscount: form.value.weeklyDiscount ? form.value.weeklyDiscount / 100 : null,
            dailyDiscount: form.value.dailyDiscount ? form.value.dailyDiscount / 100 : null
        }
        updateMachineApi(params).then(res => {
            if (res.code == 0) {
                ZyNotification.success('修改成功')
                router.push('/owner/machine')
            }
        })
    })
}

</script>


<style lang="less">
.card {
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0px 4px 4px 0px #E7EDF8;

    .tips {
        color: #8A93A7;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        margin-top: 8px;
    }
}


.page-bottom {
    position: fixed;
    bottom: 0;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0px 0px 10px 0px rgba(155, 174, 201, 0.40);
    width: calc(100% - 220px);
    min-height: 90px;
    padding: 24px;
    display: flex;
    justify-content: end;
    align-items: center;

    .tips {
        color: #FAAD14;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-right: 16px;
    }
}
</style>